<template>
  <view class="custom-tabbar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="switchTab(index, item.pagePath)"
    >
      <image :src="currentIndex === index ? item.selectedIconPath : item.iconPath" class="icon" />
      <text class="text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabList: [
		  {
		  		text: '首页',
		  		iconPath: '/static/tabbar/1.png',
		  		selectedIconPath: '/static/tabbar/a1.png',
		  		pagePath: '/pages/index/index',
		  	},
		  	{
		  		text: '认养',
		  		iconPath: '/static/tabbar/2.png',
		  		selectedIconPath: '/static/tabbar/a2.png',
		  		pagePath: '/pages/sponsor/sponsor',
		  	},
		  	{
		  		text: '农场游戏',
		  		iconPath: '/static/tabbar/3.png',
		  		selectedIconPath: '/static/tabbar/a3.png',
		  		pagePath: '/pages/farmville/farmville',
		  	},
		  	{
		  		text: '商城',
		  		iconPath: '/static/tabbar/4.png',
		  		selectedIconPath: '/static/tabbar/a4.png',
		  		pagePath: '/pages/shoppingPage/shoppingPage',
		  	},
		  	{
		  		text: '我的',
		  		iconPath: '/static/tabbar/5.png',
		  		selectedIconPath: '/static/tabbar/a5.png',
		  		pagePath: '/pages/user/user',
		  	},
			
      ],
    };
  },
  methods: {
    switchTab(index, pagePath) {
      if (this.currentIndex === index) return;
	  console.log(pagePath)
      uni.switchTab({
        url: pagePath,
      });
    },
  },
};
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height:  140rpx;;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 58rpx;
  height: 50rpx;
}

.text {
  font-size: 31rpx;
  color: #A6A6A6;
}

.active .text {
  color: #8FC36E;
  font-size: 31rpx;
}
</style>